/**
 * Created by sunbudao on 2020/08/17.
 */
import React from "react";
import {
  Icon,
  Spin
} from "antd";
import { request } from "config/request";
import styles from "./Bmap.less";
const { Component } = React;
import { cloneDeep, isEqual } from "lodash";
import classnames from 'classnames/bind';
let cx = classnames.bind(styles);
// 引入全局配置
import config from "../../config/config";
import MarkerClusterer_min from "../../config/MarkerClusterer_min"
import html2canvas from "html2canvas";
import { func } from "prop-types";
// 异步静态资源
// var baiduApi = require('../../assets/bmap_offline/map_load.js')
// var TextIconOverlay = require('../../../src/utils/bmapLib/TextIconOverlay.js')
// var MarkerClusterer = require('../../../src/utils/bmapLib/MarkerClusterer.js')
// var GeoUtils = require('../../../src/utils/bmapLib/GeoUtils.js')
let count = 0,
  libs = [
    // "https://zmzj-pro.oss-cn-shenzhen.aliyuncs.com/admin/ueditor/TextIconOverlay.js",
    "https://api.map.baidu.com/library/Heatmap/2.0/src/Heatmap_min.js",
    "https://zmzj-pro.oss-cn-shenzhen.aliyuncs.com/admin/ueditor/MarkerClusterer_mins.js",
    "https://zmzj-pro.oss-cn-shenzhen.aliyuncs.com/admin/ueditor/MarkerClusterer_simple.js",
    "https://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js",
    "https://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js",
  ];
const head = document.getElementsByTagName("head")[0];
/*
 *
 * 地图组件
 *
 */
export default class Bmap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      center: "",
      map: null, //地图实例
      markers: [],
      province: null,
      isFullScreen: false,
      isSimplify: true,
      data: [],
      map_level: 1,
      mouLng: null,
      mouLat: null,
      recordMap: "",
      map_city: "",
      pointDistrict: "",
      mapCenter: '',
      search_city: '',
      provinceData: [],
      sercIl: false,
      overtype: '',
      bamapsff: 0,
      imgpp: {},
      customerTypearr: 'all',
      clickType: 'all'
    };
    this.setMapRef = (ref) => {
      this.mapContainer = ref;
    };
  }

  async componentDidMount() {

    if (!this.map) {
      this.createMapScript().then(this.initMap);
    }

    this.watchFullScreen();
    this.props.onRef(this);
    //通过blob图片格式，解决下载地图转htmlcavans图片跨域问题
    var arrimg = [
      'https://zmzj-pro.oss-cn-shenzhen.aliyuncs.com/admin/ueditor/assets/bmap_offline/images/c.png',
      'https://zmzj-pro.oss-cn-shenzhen.aliyuncs.com/admin/ueditor/assets/bmap_offline/images/b.png',
      'https://zmzj-pro.oss-cn-shenzhen.aliyuncs.com/admin/ueditor/assets/bmap_offline/images/a.png'
    ]
    let otpI = ['c', 'b', 'a']
    let _this = this
    for (let q = 0; q < arrimg.length; q++) {
      var xhr = new XMLHttpRequest();
      var aa = null
      xhr.open('get', arrimg[q], true);
      xhr.responseType = 'blob';
      xhr.onload = function () {
        if (this.status == 200) {
          _this.state.imgpp[otpI[q]] = (URL.createObjectURL(this.response));
        }
      };
      xhr.send(null);
    }
  }
  componentDidUpdate(prevProps, prevState) {
    if (this.map) {
      // this.addOverlayGroup(nextProps)
      
      if (this.state.clickType != this.state.customerTypearr) {
        this.setState({
          customerTypearr: this.state.clickType
        });
        this.add_overlay(prevProps);
      }
      if (prevProps.provinceData != this.state.provinceData) {
        this.setState({
          data: prevProps,
          map_level: prevProps.map_level,
          provinceData: prevProps.provinceData
        });
        this.add_overlay(prevProps);

      }
      // // 搜索切换城市变化
      if (prevProps.search_city != this.state.search_city || prevProps.productIdList != this.state.productIdList) {
        this.setState({
          data: prevProps,
          search_city: prevProps.search_city,
          productIdList: prevProps.productIdList,
          sercIl: true
        })
      }
    } else {
      //tabs切换 组件已销毁，但是地图资源已加载，不需要再次加载地图资源
      this.initMap();
      // this.createMapScript().then(this.initMap);
    }

  }
  // 父组件赋值状态
  setcustomerType(type){
    this.setState({
      clickType: type
    });
  }
  // 放大缩小地图层级
  zoomInAndZoomOut(ZOOM, ITEM) {
    let { BMap, BMapLib = {} } = window;
    let _this = this
    var geoc = new BMap.Geocoder();
    geoc.getPoint(ITEM ? ITEM : '北京', function (point) {
      if (point) {
        point = new BMap.Point(point.lng, point.lat);
        _this.map.centerAndZoom(point, ZOOM);
      }
    });
  }
  // 省市区数据处理
  // type:province| city|district
  handleDa(data, type) {
    var obj = {},
      seleArray = [];
    for (let i = 0; i < data.length; i++) {
      if (!obj[data[i][type]]) {
        seleArray.push(data[i]);
        obj[data[i][type]] = true;
      } else {
        for (let j = 0; j < seleArray.length; j++) {
          if (seleArray[j][type] == data[i][type]) {
            let a = Number(seleArray[j].count) + Number(data[i].count);
            seleArray[j].count = a.toString();
          }
        }
      }
    }
    return seleArray;
  }
  curstomerDa(arrays, type, sera) {
    // 处理数据
    let allMIS = [],
      not_visitList = [],
      visitedList = [],
      dealList = [];
    let allNum = 0,
      not_visitNum = 0,
      visitedNum = 0,
      dealNum = 0;
    let data = arrays, _this = this
    if (type == 'detail') {
      let ghgh = data = arrays.map((item) => {
        return {
          ...item,
          count: 1
        }
      })
      data = ghgh
    }
    if (type == 'detail') {
      allMIS = this.handleDa(JSON.parse(JSON.stringify(data)), 'district')
    } else {
      allMIS = this.handleDa(JSON.parse(JSON.stringify(data)), type || 'province')
    }

    // 合并未到访客户not_visit、已到访客户visited、已成交deal
    for (let i = 0; i < data.length; i++) {
      allNum += Number(JSON.parse(JSON.stringify(data[i].count)))
      // allMIS.push(JSON.parse(JSON.stringify(data[i])))
      if (data[i].customerType == "not_visit") {
        not_visitList.push(JSON.parse(JSON.stringify(data[i])))
        not_visitNum += Number(
          data[i].count
        )
      } else if (data[i].customerType == "visited") {
        visitedList.push(JSON.parse(JSON.stringify(data[i])))
        visitedNum += Number(data[i].count)
      } else if (data[i].customerType == "deal") {
        dealList.push(JSON.parse(JSON.stringify(data[i])))
        dealNum += Number(data[i].count)
      }
    }
    if (type == 'detail') {
      not_visitList = this.handleDa(JSON.parse(JSON.stringify(not_visitList)), 'district')
      visitedList = this.handleDa(JSON.parse(JSON.stringify(visitedList)), 'district')
      dealList = this.handleDa(JSON.parse(JSON.stringify(dealList)), 'district')
    }
    allMIS = allMIS.sort(function (a, b) {
      return b.count - a.count
    })
    not_visitList = not_visitList.sort(function (a, b) {
      return b.count - a.count
    })
    visitedList = visitedList.sort(function (a, b) {
      return b.count - a.count
    })
    dealList = dealList.sort(function (a, b) {
      return b.count - a.count
    })
    return {
      allMIS,
      not_visitList,
      visitedList,
      dealList,
      allNum,
      not_visitNum,
      visitedNum,
      dealNum
    }
  }
  add_overlay(payload) {
    let { map, markerClusterer } = this;
    var _this = this;
    let len = 1;
    let mapData = JSON.parse(JSON.stringify(payload.provinceData));
    let map_level = payload.map_level;
    let clickType = this.state.clickType
    var i = 0;
    if (len) {
      // 定义自定义覆盖物的构造函数
      // 复杂的自定义覆盖物
      function ComplexCustomOverlay(point, text, num, bg) {
        this._point = point;
        this._text = text;
        this.num = num;
        this._bg = bg;
      }
      map.clearOverlays();
      ComplexCustomOverlay.prototype = new BMap.Overlay();
      ComplexCustomOverlay.prototype.initialize = function (map) {
        this._map = map;
        var div = (this._div = document.createElement("div"));
        div.style.position = "absolute";
        div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
        div.style.backgroundColor = "#fff";
        div.style.border = "1px solid #D7D6D2";
        div.style.borderRadius = "12px 12px 12px 0";
        div.style.color = "#333";
        div.style.lineHeight = "18px";
        div.style.whiteSpace = "nowrap";
        div.style.MozUserSelect = "none";
        div.style.fontSize = "12px";
        var span = (this._span = document.createElement("span"));
        span.style.position = "relative";
        span.style.padding = "2px 6px";
        span.style.borderRadius = "12px 0 0 0";
        span.style.top = "0";
        span.style.display = "inline-block";
        span.style.backgroundColor = "#fff";
        div.appendChild(span);
        span.appendChild(document.createTextNode(this._text));
        var span1 = (this._span = document.createElement("span"));
        span1.style.position = "relative";
        span1.style.top = "0";
        span1.style.color = "#fff";
        span1.style.padding = "2px 6px";
        span1.style.borderRadius = "0 12px 12px 0";
        span1.style.display = "inline-block";
        span1.style.backgroundColor = this._bg ? this._bg : "#3D93FD";
        div.appendChild(span1);
        span1.appendChild(document.createTextNode(this.num));
        var that = this;
        map.getPanes().labelPane.appendChild(div);

        return div;
      };
      ComplexCustomOverlay.prototype.draw = function () {
        var map = this._map;
        var pixel = map.pointToOverlayPixel(this._point);
        this._div.style.left =
          pixel.x - 25 + "px";
        this._div.style.top = pixel.y - 25 + "px";
      };

      let getZoom = this.map.getZoom();
      // 点聚合

      markerClusterer.clearMarkers(); //清空聚合点

      // 处理数据
      let allArray = [], seleArray = [];
      // 合并未到访客户not_visit、已到访客户visited、已成交deal
      for (let i = 0; i < mapData.length; i++) {
        for (
          let j = 0;
          j < mapData[i].customerMapPointRespDtoList.length;
          j++
        ) {
          var a = JSON.parse(
            JSON.stringify(mapData[i].customerMapPointRespDtoList[j])
          );
          allArray.push(a);
        }
      }

      if (map_level == 1) {
        // 4-5省
        // 客户地图数据
        let par = this.curstomerDa(allArray)
        this.props.getCustomerList(par);
        if (clickType == 'all') {
          // 相同省份去重并合计count数目
          seleArray = this.handleDa(allArray, "province")
        } else {
          seleArray = par[''+clickType+'List']
        }
        for (; i < seleArray.length; i++) {
          var myCompOverlay = new ComplexCustomOverlay(
            new BMap.Point(seleArray[i].lng, seleArray[i].lat),
            seleArray[i].province,
            seleArray[i].count
          );
          map.addOverlay(myCompOverlay);
        }
      } else if (map_level == 2) {
        // 客户地图数据
        let par = this.curstomerDa(allArray, 'city')
        this.props.getCustomerList(par);
        // 6-8市
        if (clickType == 'all') {
          // 相同省份去重并合计count数目
          seleArray = this.handleDa(allArray, "city")
        } else {
          seleArray = par[''+clickType+'List']
        }
        for (; i < seleArray.length; i++) {
          var myCompOverlay = new ComplexCustomOverlay(
            new BMap.Point(seleArray[i].lng, seleArray[i].lat),
            seleArray[i].city,
            seleArray[i].count
          );
          map.addOverlay(myCompOverlay);
        }
        // this.props.getCustomerList({
        //   allArray, not_visitList, visitedList, dealList,
        //   not_visitNum, visitedNum, dealNum, allNum
        // })
      } else if (map_level == 3) {
        // 9-10区
        // 客户地图数据
        // if(this.state.sercIl){

        // }
        let par = this.curstomerDa(allArray, 'district')
        this.props.getCustomerList(par);
        if (clickType == 'all') {
          // 相同省份去重并合计count数目
          seleArray = this.handleDa(allArray, "district")
        } else {
          seleArray = par[''+clickType+'List']
        }
        for (; i < seleArray.length; i++) {
          var myCompOverlay = new ComplexCustomOverlay(
            new BMap.Point(seleArray[i].lng, seleArray[i].lat),
            seleArray[i].district,
            seleArray[i].count
          );
          map.addOverlay(myCompOverlay);
        }
      } else if (map_level == 4) {
        let par = this.curstomerDa(allArray, 'detail')
        this.props.getCustomerList(par);
        let markers = [],miaoData=[];
        var myIcon1 = new BMap.Icon(this.state.imgpp['c'], new BMap.Size(20, 28));
        var myIcon2 = new BMap.Icon(this.state.imgpp['b'], new BMap.Size(20, 28));
        var myIcon3 = new BMap.Icon(this.state.imgpp['a'], new BMap.Size(20, 28));
        
        if (clickType == 'all') {
          miaoData = mapData
        } else {
          miaoData = mapData.filter((item)=>{
            return item.customerType ==clickType
          })
        }
        for (; i < miaoData.length; i++) {
          let points = [];
          let customerMapPointRespDtoList =
            miaoData[i].customerMapPointRespDtoList;
          // if (miaoData[i].customerType == 'not_visit') {
            for (let j = 0; j < customerMapPointRespDtoList.length; j++) {
              let pt = new BMap.Point(
                customerMapPointRespDtoList[j].lng,
                customerMapPointRespDtoList[j].lat
              );
              markers.push(new BMap.Marker(pt, {
                icon: miaoData[i].customerType == 'not_visit'?myIcon1:miaoData[i].customerType == 'visited'?myIcon2:myIcon3
              }));
            }
          // }

        }
        markerClusterer.addMarkers(markers);
      }
    }
  }

  shouldComponentUpdate() {
    return !this.inited;
  }

  componentWillUnmount() {
    if (this.map) {
      this.map = null;
    }
    if (this.map) {
      this.maps = null;
    }
    if (this.markerClusterer) {
      this.markerClusterer = null;
    }
  }

  initMap = () => {
    // this.windowAddMouseWheel() 
    let { markers, center } = this.state;
    let { BMap, BMapLib = {} } = window;

    // 百度地图API功能
    var map = new BMap.Map(this.mapContainer);
    var maps = BMapLib;
    var point = new BMap.Point(116.331398, 39.897445);

    //定位拾坐标
    // var geoc = new BMap.Geocoder();
    // 继承API的BMap.Overlay
    map.centerAndZoom(point, this.props.getZoom ? this.props.getZoom : 5);
    map.enableScrollWheelZoom(); // 开启/禁用 滚动缩放
    map.disableDoubleClickZoom(); //禁用鼠标双击放大
    // map.addEventListener('dragend', this.onzoomendFun.bind(this));
    let _this = this;
    // 监听地图缩放
    map.addEventListener("zoomend", this.onzoomendFun.bind(this, false, true));
    // 监听地图拖拽
    // map.addEventListener("dragend", this.onzoomendFun.bind(this, true, false));
    // map.addEventListener("click", this.onzoomendFun.bind(this, true, false));
    // 监听鼠标移动
    // map.addEventListener("mousemove", function (e) {
    //   _this.setState({
    //     mouLng: e.point.lng,
    //     mouLat: e.point.lat,
    //   });
    // });
    this.map = map;
    this.maps = maps;
    // this.geoc = geoc;
    var markerClusterer = new BMapLib.MarkerClusterer(this.map, {
      markers: [],
    });
    this.markerClusterer = markerClusterer;
  };

  //切换地图poi
  setMapStyle() {
    let onOrOff = this.state.isSimplify ? "off" : "on";
    // 2.0版本是setMapStyle，3.0版本是setMapStyleV2
    this.map.setMapStyleV2({
      styleJson: [
        {
          featureType: "road",
          elementType: "all",
          stylers: {
            // color: "#ffffff",
            visibility: onOrOff,
          },
        },
        {
          featureType: "building",
          elementType: "all",
          stylers: {
            visibility: onOrOff,
          },
        },
        {
          featureType: "poilabel",
          elementType: "all",
          stylers: {
            visibility: onOrOff,
          },
        },
        {
          featureType: "manmade",
          elementType: "all",
          stylers: {
            visibility: onOrOff,
          },
        },
      ],
    });
    this.setState({
      isSimplify: !this.state.isSimplify,
    });
  }

  onzoomendFun(map, suofang, e) {
    let { BMap, BMapLib = {} } = window;
    let _this = this;
    e = e || window.event;
    let center = new BMap.Point(this.state.mouLng, this.state.mouLat);
    let mapCenter = e.target.getCenter()
    var geoc = new BMap.Geocoder();
    // geoc.getLocation(center, (rs) => {
    //   console.log("中心坐标", rs);
    //   let a = rs.addressComponents["city"];
    //   _this.setState({
    //     mapCenter: a
    //   })
    // });
    // geoc.getLocation(center, (rs) => {
    //   console.log("坐标信息", rs);
    //   let a = rs.addressComponents["province"];
    //   let b = rs.addressComponents["city"];
    //   _this.setState({
    //     recordMap: a,
    //     mapCenter: b
    //   })
    // });
    //根据坐标查询地址
    let map_level = this.state.map_level;
    let getZoom = this.map.getZoom();
    if (getZoom > 4 && getZoom <= 6) {
      // 省
      map_level = 1;
    } else if (getZoom >= 7 && getZoom <= 9) {
      // 市
      map_level = 2;
    } else if (getZoom == 10 || getZoom == 11) {
      // 区
      map_level = 3;
    } else if (getZoom > 11) {
      // 详细
      map_level = 4;
    }

    this.setState(
      {
        map_level,
        center,
      },
      () => {
        let params = {
          map_level,
          getZoom: getZoom,
        };
        if(getZoom == 6||getZoom==7||(getZoom>=9&&getZoom<=12)){
        params.search_city = _this.state.search_city
        _this.props.getProvince(params);

        _this.add_overlay(_this.state.data);
      }
      }
    );
  }
  createMapScript = () => {
    var self = this;
    const ak = "Q17CQo5pl4GPDqxmsgXwqLGYxTCijbrh";
    return new Promise((resolve, reject) => {
      if (window.BMap && Window.BMapLib) {
        // 已经加载则直接返回
        resolve({ BMap: window.BMap, BMapLib: window.BMapLib });
      } else {
        // 异步加载
        // 注释部分：线上百度，截图时图片跨域
        // const bmap = document.createElement('script');
        // bmap.type = 'text/javascript';
        // bmap.src = `https://api.map.baidu.com/api?v=3.0&ak=${ak}&callback=MapLoadSuccess`;

        // const bmapMeta = document.createElement('meta');
        // bmapMeta['http-equiv'] = "Content-Security-Policy";
        // bmapMeta['content']="upgrade-insecure-requests";

        // head.appendChild(bmap);
        // window.MapLoadSuccess = function() {
        //     // BMap加载完成，开始加载libs
        //     libs.forEach(lib => {
        //       self.loadLib(lib, resolve, reject);
        //     })
        // }
        // bmap.onerror = function() {
        //     reject('地图初始化失败');
        // }
        libs.forEach((lib) => {
          self.loadLib(lib, resolve, reject);
        });
      }
    });
  };

  loadLib(src, resolve, reject) {
    const lib = document.createElement("script");
    lib.setAttribute("type", "text/javascript");
    lib.setAttribute("src", src);
    lib.onerror = function () {
      reject("地图初始化失败");
    };
    lib.onload = function () {
      count += 1;
      if (count === libs.length) {
        // libs全部加载成功才返回
        resolve({ BMap: window.BMap, BMapLib: window.BMapLib });
      }
    };
    head.appendChild(lib);
  }

  handleFullScreen = () => {
    if (!this.state.isFullScreen) {
      this.requestFullScreen();
    } else {
      this.setState({ isFullScreen: false });
    }
  };

  //进入全屏
  requestFullScreen = () => {
    let de;
    de = document.getElementById("fullScreenContainer");
    if (de.requestFullscreen) {
      de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
      de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
      de.webkitRequestFullScreen();
    }
  };
  //退出全屏
  exitFullscreen = () => {
    var de = document;
    if (de.exitFullscreen) {
      de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
      de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
      de.webkitCancelFullScreen();
    }
  };
  //监听事件
  watchFullScreen = () => {
    const _self = this;
    let de;
    de = document;
    document.addEventListener(
      "fullscreenchange",
      function () {
        _self.setState({
          isFullScreen: de.fullscreen,
        });
      },
      false
    );
    document.addEventListener(
      "webkitfullscreenchange",
      function () {
        _self.setState({
          isFullScreen: de.webkitIsFullScreen,
        });
      },
      false
    );
    document.addEventListener(
      "mozfullscreenchange",
      function () {
        _self.setState({
          isFullScreen: de.mozFullScreen,
        });
      },
      false
    );
  };

  //导出图片
  exportImage = () => {
    const newCanvas = document.createElement("canvas");
    const element = document.querySelector("#fullScreenContainer");
    var scrollTop = document.querySelector("html").scrollTop
    var scrollLeft = document.querySelector("html").scrollLeft
    const dom_width = parseInt(window.getComputedStyle(element).width);
    const dom_height = parseInt(window.getComputedStyle(element).height);
    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
    newCanvas.width = dom_width * 4;
    newCanvas.height = dom_height * 4;
    newCanvas.style.width = dom_width + "px";
    newCanvas.style.height = dom_height + "px";
    const context = newCanvas.getContext("2d");
    context.scale(2.6, 2.6);
    context.translate(-scrollLeft * 1.25, -scrollTop * 1.25)
    // context.translate(0, -dom_height/2);
    // window.pageYoffset = 0;
    // document.documentElement.scrollTop = 0;
    // document.body.scrollTop = 0;
    html2canvas(element, {
      canvas: newCanvas,
      useCORS: true,
      backgroundColor: null,
    }).then((canvas) => {
      const imgUri = canvas
        .toDataURL("image/png")
        .replace("image/png", "image/octet-stream"); // 获取生成的图片的url
      const base64ToBlob = (code) => {
        let parts = code.split(";base64,");
        let contentType = parts[0].split(":")[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;

        let uInt8Array = new Uint8Array(rawLength);

        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], { type: contentType });
      };
      const blob = base64ToBlob(imgUri);
      // window.location.href = imgUri; // 下载图片
      // 利用createObjectURL，模拟文件下载
      const fileName = "客户地图.png";
      if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, fileName);
      } else {
        const blobURL = window.URL.createObjectURL(blob);
        const vlink = document.createElement("a");
        vlink.style.display = "none";
        vlink.href = blobURL;
        vlink.setAttribute("download", fileName);

        if (typeof vlink.download === "undefined") {
          vlink.setAttribute("target", "_blank");
        }

        document.body.appendChild(vlink);

        var evt = document.createEvent("MouseEvents");
        evt.initEvent("click", false, false);
        vlink.dispatchEvent(evt);

        document.body.removeChild(vlink);
        window.URL.revokeObjectURL(blobURL);
      }
      // window.pageYoffset = htmS;
      // document.documentElement.scrollTop = htmS;
      // document.body.scrollTop = htmS;
    });
  };

  simplification = () => {
    this.setMapStyle();
  };
  render() {
    const { width = "100%", height = "calc(100vh - 265px)", style } = this.props;
    return (
      <div
        className="mapDiv"
        style={{
          border: "solid 1px #e1e1e1",
          marginBottom: 16,
          borderRadius: 5,
        }}
      >
        <div
          id="fullScreenContainer"
          ref={this.setMapRef}
          style={{ width, height, ...style }}
        />
        <div className="mapAuxiliary">
          <div className={cx('map_idv')}>
            <div>
              <div className={cx('maptip_item')}>
                <div onClick={this.simplification}>
                  <img className={cx('customerding')} src="https://zmzj-pro.oss-cn-shenzhen.aliyuncs.com/web/customer/icon_map%402x.png" alt="" />
                  {this.state.isSimplify ? '详细地图' : '精简地图'}
                </div>
              </div>
              <div className={cx('maptip_item')}>
                <div onClick={this.exportImage}>
                  <span className={cx('beforeLine')}>
                    <Icon type="download" className={cx('icon-li')} />下载
                   </span>
                </div>
              </div>
              <div className={cx('maptip_item')}>
                <div onClick={this.handleFullScreen}>
                  <span className={cx('beforeLine')}>
                    <Icon type="fullscreen" className={cx('icon-li')} />全屏
                   </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
